<template>
  <!-- 外层 -->
  <div class="container">
    <!-- 左边部分 -->
    <div class="left">
      <!-- logo -->
      <div class="logo">
        <p>城职</p>
        <p>就业管理平台</p>
      </div>
      <!-- 左边导航栏 -->
      <div class="left-nav">
        <router-link v-if="user && user.is_superuser" to="/workbench" active-class="active-link"
          class="default-link">工作台</router-link>

        <router-link v-if="user && user.is_superuser" to="/schoolmanagement" active-class="active-link"
          class="default-link">学校管理</router-link>

        <router-link to="/schooladminmanagement" active-class="active-link" class="default-link">学校管理员</router-link>

        <router-link to="/teacher" active-class="active-link" class="default-link">教师账号</router-link>

        <router-link to="/student" active-class="active-link" class="default-link">学生账号</router-link>

        <router-link v-if="user && user.is_school_admin" to="/employment" active-class="active-link"
          class="default-link">就业管理</router-link>

        <router-link to="/person" active-class="active-link" class="default-link">个人中心</router-link>
      </div>
    </div>
    <!-- 右边部分 -->
    <div class="right">
      <!-- 上方导航栏 -->
      <div class="top-nav">
        <div class="leftmessage">
          <el-icon>
            <BellFilled />
          </el-icon>
          <pspan>公告消息</pspan>
        </div>
        <div class="logo-info">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-icon>
                <User />
              </el-icon>
              {{ user ? user.username : "未登录" }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus"><router-link to="/person" active-class="active-link"
                    class="default-link">个人中心</router-link></el-dropdown-item>
                <el-dropdown-item :icon="CirclePlusFilled">
                  安全中心(未实现)
                </el-dropdown-item>
                <el-dropdown-item :icon="CirclePlus" @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- 内容部分 -->
      <div class="centent">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Cookies from "js-cookie";
import { ElMessage } from "element-plus";
import { getUser } from '@/api/userApi';
export default {
  data() {
    return {};
  },
  beforeCreate() {
    getUser(0).then((res) => {
      // 指向 Vuex store 的对象修改状态调用了名为 "setUser" 的mutation并传递了一个参数 res
      this.$store.commit("setuser", res)
    }).catch((error) => {
      ElMessage({
        message: error,
        type: "warning",
      });
    });
  },
  computed: {
    // 拿去store中的用户信息
    ...mapState(["user"]),
  },
  methods: {
    // 清除Cookies,然后跳转到登录页面
    logout() {
      Cookies.set("token", "");
      // 当用户登出时，通过 commit 方法调用 clearUser 方法来清空登录数据。
      this.$store.commit('clearUser');
      // 路由跳转
      this.$router.push({ name: "login" });
      ElMessage({
        message: "退出成功!",
        type: "success",
      });
    },
  }
}
</script>
<style scoped >
.container {
  display: flex;
  width: 100%;
  height: 100vb;
  /* box-sizing: border-box; */
  /* 同时设置主轴方向和不换行。 */
  flex-flow: row wrap;
  align-content: flex-start;
}

.left {
  display: flex;
  flex-flow: column nowrap;
  width: 20%;
  min-width: 200px;
  max-width: 250px;
  height: 100%;

}

.right {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  height: 100%;
}

/* .logo  */
.logo {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 98px;
  /* border: 1px solid red; */
  background-color: rgb(46, 120, 178);
  border-bottom: 2px solid var(--el-border-color);
}

.logo p {
  font-weight: 700;
  color: rgb(255, 255, 255);
  font-size: 20px;
}

/* 上方导航栏 */
.top-nav {
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  width: 100%;
  height: 100px;
  border-bottom: 2px solid var(--el-border-color);
  /* 防止外层的大小不受内边距的影响 */
  box-sizing: border-box;
  padding: 5px 10px;

  /* .leftmessage {
    display: inline-block;
    align-items: center;
    height: 99px;
    background-color: #347caf;
    font-weight: 700;
    box-sizing: border-box;
    padding: 5px 20px;
    margin: 40px;
    color: #ffffff;
  } */

  .logo-info {
    display: inline-block;

    /* border: 1px solid red; */
    .el-dropdown-link {
      font-size: 18px;
      /* 设置触发下拉的文字大小 */
    }

    .el-dropdown-menu__item {
      font-size: 18px;
      /* 设置下拉列表中文字的大小 */
    }
  }
}

/* 左侧导航栏 */
.left-nav {
  width: 100%;
  flex: 1;
  /* border: 1px solid rgb(12, 4, 255); */
  background-color: rgb(46, 120, 178);

  display: flex;
  flex-flow: column nowrap;
  align-content: center;

  .default-link {
    /* 设置元素显示类型为块级元素 */
    display: block;
    /* 去除链接的默认样式 */
    text-decoration: none;
    font-size: 16px;
    color: rgb(255, 255, 255);
    margin: 50px 40px 0 45px;

    /* 设置居中flex */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active-link {
    width: 140px;
    height: 50px;
    font-size: 18px;
    font-weight: 300;
    background-color: rgb(159, 160, 77);
    /* 圆角边框 */
    border-radius: 70px;
  }

  .default-link:hover {
    color: rgb(150, 150, 64);
  }

}

/* 内容区域 */
.centent {
  width: 100%;
  flex: 1;
  /* border-bottom不会把盒子撑大 */
  /* border-bottom: 3px solid rgb(0, 0, 0); */

}
</style>
